<template>
	<view class="index-box">
		<view class="index-header">
			<image class="login-img" src="/static/shilu-login/logo.png"></image>
		</view>
		<view class="index-btn">
			<view class="btn-login button-login-regist" @tap="bindLogin()">
				<text>登录</text>
			</view>
			<view class="btn-login button-phone-login" @tap="bindLogin()">
				<text>手机号快捷登录</text>
			</view>
		</view>
		<view class="to-register">
			我还没有<text class="to-register-btn" @tap="bindRegister()">注册>></text>
		</view>
		<view class="index-agreement">
			<checkbox color="#315EFB" class="index-agreement-checkbox" value="cb" checked="true" />
			已阅读并同意
			<text class="agreement-tip-blur" @tap="bindShowAgreenment(0)">《用户行为准则》 </text>
			及 <text class="agreement-tip-blur" @tap="bindShowAgreenment(1)">《个人信息授权书》 </text>
		</view>
		<uni-popup ref="popup">
			<view class="popup-content">
				<view class="popup-title">{{title}}</view>
				<view class="popup-text" v-html="html"></view>
				<view class="popup-foot">
					<view class="agreement-list-box">
						<view class="agreement-list-item" :class="currentInx == index?'active':''"
							@tap="buildHtml(index)" v-for="(item,index) in agreementList" :key="item.id"> {{item.name}}
						</view>
						<view class="agreement-total">共{{agreementList.length}}份协议 <uni-icons type="up"
								size="15"></uni-icons></view>
					</view>
					<view class="btn-agree" @tap="toLoginOrRegister()">
						<text>已阅知并同意</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "",
				html: "",
				currentInx: 0,
				agreementList: [{
						id: '01',
						name: '《泽金产融用户行为准则》',
						html: '<p>基本信息:以您提交的申办资料或您在丙方服务平台注册时或之后不断更新时提交的身份信息、通讯信息为准。鉴于乙方具有专业保理资质，有权从事受让应收账款相关的应收账款融资、应收账款催收、坏账担保等保理业务。现乙方与甲方(泽金产融服务方)、丙方建立合作关系，共同为泽金产融用户提供不同付款条件的“先通行后付费”泽金产融服务甲方将对丁方基于使用泽金产融所产生的未来所有应收通行费、停车费、汽渡费、加油费等泽金产融应收账款转让给乙方，乙方支付一定对价买断甲方对丁方的应收账款债权而获得对丁方的收款权和服务权等权利，同时乙方授权丙方负责为了方提供对账、结算等平台信息及技术服务。为明确甲乙丙丁四方的权利义务，各方本着平等自愿原则，经充分协商，达成本合同，以资共同信守。第一条 定义ETC记账卡/ETC卡ETC用户提供不同付款条件的“先通行后付费”ETC记账卡服务甲方将对丁方基于使用ETC记账卡所产生的未来所有应收通行费、停车费、汽渡费、加油费等ETC消费应收账款转让给乙方，乙方支付一定对价买断甲方对丁方的应收账款债权而获得对丁方的收款权和服务权等权利，同时乙方授权丙方负责为了方提供对账、结算等平台信息及技术服务。为明确甲乙丙丁四方的权利义务，各方本着平等自愿原则，经充分协商，达成本合同，以资共同信守。结算等平台信息及技术服务。为明确甲乙丙丁四方的权利义务，各方本着平等自愿原则，经充分协商</p>',
						type: 'user'
					},
					{
						id: '02',
						name: '《个人信息授权书》',
						html: '<p>个人信息权书个人信息授权书个人信息授权书个人信息授权书个人信息授权23书个权23书个权书个人信息授权书个人信息授权23书个授权书个人信息授权书个人信息授权23书个人3信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书个人信息授权书</p>',
						type: 'auth'
					}
				],
				clickType: 'login'
			}
		},
		methods: {
			bindLogin() {
				this.buildHtml(0)
				this.$refs.popup.open('bottom')
				this.clickType = 'login'
			},
			bindRegister() {
				this.buildHtml(0)
				this.$refs.popup.open('bottom')
				this.clickType = 'reg'
			},
			bindShowAgreenment(index) {
				this.buildHtml(index)
				this.$refs.popup.open('bottom')
			},
			buildHtml(index) {
				this.currentInx = index;
				this.title = this.agreementList[index].name;
				this.html = this.agreementList[index].html
			},
			toLoginOrRegister() {
				this.$refs.popup.close()

				uni.navigateTo({
					url: this.clickType == 'login' ? '/pages/login/login' : '/pages/register/reg'
				});
			}
		}
	}
</script>

<style>
	.index-box {
		width: 100%;
		height: 100%;
		background-color: #F8F9Fc;
	}

	.index-header {
		width: 100%;
		margin: auto;
		text-align: center;
		padding-top: 77rpx;
	}

	.login-img {
		width: 301rpx;
		height: 301rpx;
	}

	.index-btn {
		width: 100%;
		padding-top: 178rpx;
	}

	.btn-login {
		width: 682rpx;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		margin: auto;
	}

	.button-login-regist {
		font-family: PingFangSC-Regular;
		font-size: 36rpx;
		color: #333333;
		letter-spacing: 0;
		font-weight: 400;
		background: #FFFFFF;
		border: 1px solid rgba(49, 94, 251, 1);
		border-radius: 46rpx;
	}

	.button-phone-login {
		font-family: PingFangSC-Regular;
		font-size: 36rpx;
		letter-spacing: 0;
		font-weight: 400;
		color: #FFFFFF;
		background: #315EFB;
		border-radius: 46rpx;
		margin-top: 30rpx;
	}

	.to-register {
		width: 100%;
		position: absolute;
		bottom: 180rpx;
		padding: 0 35rpx;
		text-align: center;
		margin: auto;
	}

	.to-register-btn {
		color: #315EFB;
	}

	.index-agreement {
		position: absolute;
		bottom: 62rpx;
		padding: 0 35rpx;
	}

	.agreement-tip {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #333333;
		letter-spacing: 0;
		line-height: 40rpx;
		font-weight: 400;
	}

	.agreement-tip-blur {
		color: #315EFB;
	}

	.popup-content {
		max-height: 1228rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0 0;
	}

	.popup-title {
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		border: 1px solid rgba(239, 239, 239, 1);
	}

	.popup-text {
		padding: 30rpx 45rpx;
		max-height: 606rpx;
		overflow: auto;
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #666666;
		font-weight: 400;
	}

	.popup-foot {
		height: 275rpx;
		background: #F5F5F5;
	}

	.agreement-list-box {
		position: relative;
		padding: 22rpx;
	}

	.agreement-total {
		position: absolute;
		right: 26rpx;
		top: 11rpx;
		font-family: PingFangSC-Regular;
		font-size: 22rpx;
		color: #333333;
		letter-spacing: -1.8rpx;
		font-weight: 400;
	}

	.agreement-list-item {
		font-family: PingFangSC-Regular;
		font-size: 22rpx;
		color: #666666;
		letter-spacing: 0;
		font-weight: 400;
		height: 30rpx;
		line-height: 30rpx;
		padding-bottom: 12rpx;
	}

	.agreement-list-item.active {
		color: #333333;
	}

	.btn-agree {
		width: 400rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: #315EFB;
		border-radius: 44rpx;
		font-family: PingFangSC-Regular;
		font-size: 36rpx;
		color: #FFFFFF;
		letter-spacing: 0.56rpx;
		text-align: center;
		font-weight: 400;
		margin: 6rpx auto 0;
	}
</style>